<template>
  <!-- <router-link to="/login">go to login</router-link> -->
      <!-- 左边列表 -->
    <div>
        <div class="bj">
            <div class="left-title">
                <span>ORDER聚造</span>
            </div>
            <el-row class="tac">
                <el-col :span="12" class="col">
                    <el-menu 
                    default-active="/shouye"
                    class="el-menu-vertical-demo"
                    background-color="transparent"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    :unique-opened="true"
                    router
                    @open="handleOpen"
                    @close="handleClose">
                        <el-menu-item index="/index/shouye">
                            <i class="el-icon-house"></i>
                            <span>首页</span>
                        </el-menu-item>
                        <el-submenu class="submenu" v-for="menu in menulist" :key="menu.id" :index="`${menu.id}`">
                            <template slot="title">
                                <i :class="menu.iconNeme"></i>
                                <span>{{menu.name}}</span>
                            </template>
                        <!-- 子菜单 -->
                            <el-menu-item-group>
                                    <el-menu-item v-for="item in menu.children" :key="item.id" :index="`${item.url}`">
                                        <template slot="title">
                                            <span>{{item.name}}</span>
                                        </template>    
                                    </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu> 
                    </el-menu>   
                </el-col> 
            </el-row>
        </div>
        <!-- 右边 --> 
        <div class="bj2">
            <div class="righthead">
                <!-- 页面标题 -->
                <b class="ch">{{ $route.meta.title }}</b>
                <div class="right1">
                    <el-avatar class="head" :size="50" :src="photo"></el-avatar>
                    <div class="right2">
                        <el-tooltip effect="light" content="修改密码" placement="bottom">
                            <div slot="content" @click="dialogFormVisible=true">修改密码</div>
                            <span class="name">{{nickName}}</span>
                        </el-tooltip>
                        <span class="cursor">{{ShowuserName}}</span>
                        <span class="hello">,你好</span>
                        <el-button type="danger" class="button" size="small" round icon="el-icon-switch-button" @click="logout">退出</el-button>
                    </div> 
                </div>
           </div>
           <router-view></router-view>
        </div>
        <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
            <el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px">
                <el-form-item :label="label_test" prop="passWord">
                    <el-input type="password" v-model="form.passWord" show-password autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassWord">
                    <el-input type="password" v-model="form.newPassWord" show-password autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="reNewPassWord">
                    <el-input type="password" v-model="form.reNewPassWord" show-password autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
                <div slot="footer" class="footer">
                    <el-button type="primary" @click="changePassWord">确定</el-button> 
                    <el-button @click="dialogFormVisible = false ">取消</el-button>
                </div>
        </el-dialog>
    </div>

</template>

<script>
import Cookie from "js-cookie"
import md5 from 'js-md5'

export default {
  name: 'index',
  components: {},
  data(){
    return {
        menulist:[
            {
                id:1,
                name:'首页管理',
                iconNeme:"el-icon-box",
                children:[
                    {
                        id:'1-1',
                        name:'轮播图管理',
                        url:'/index/banner'
                    },
                    {
                        id:'1-2',
                        name:'分类区管理',
                        url:'/index/category'
                    },
                    {
                        id:'1-3',
                        name:'为你推荐管理',
                        url:'/index/recommend'
                    },
                ]
            },
            {
                id:2,
                name:'商品管理',
                iconNeme:"el-icon-shopping-bag-1",
                children:[
                    {
                        id:1,
                        name:'分类管理',
                        url:'/index/categories'
                    },
                    {
                        id:2,
                        name:'品牌管理',
                        url:'/index/brand'
                    },
                    {
                        id:3,
                        name:'商品管理',
                        url:'/index/goods'
                    },
                    {
                        id:4,
                        name:'单品管理',
                        url:'/index/onegoods'
                    }
                ]
            },
            {
                id:3,
                name:'商场管理',
                iconNeme:"el-icon-document",
                children:[
                    {
                        id:1,
                        name:'新闻管理',
                        url:'/index/news'
                    }
                ]
            }
        ],
        label_test:'密' + '\xa0\xa0\xa0\xa0' + '码' ,
        dialogFormVisible:false,
        form:{
            passWord:'',
            newPassWord:'',
            reNewPassWord:''
        },
        rules:{
            passWord: [
            { required:true,message:'请输入原密码', trigger: 'blur' }
          ],
            newPassWord: [
            { required:true,message:'请输入新密码', trigger: 'blur' }
          ],
            reNewPassWord: [
            { required:true,message:'请再次输入新密码', trigger: 'blur' },
            { validator: (rule,value,callback) => {
                  if (value === '') {
                    callback(new Error('请再次输入密码'));
                    } else if (value !== this.form.newPassWord) {
                    callback(new Error('两次输入密码不一致!'));
                    } else {
                    callback();
                    }
            }}
          ]
        },
    }
  },
  methods:{
      showIndex(menuId){
        //   console.log(menuId)
        //   if (menuId !== '1') {
        //       this.indexState = true
        //   }
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      changePassWord(){
          this.$refs.form.validate((vaild) => {
              if(vaild){
                  this.$http({
                      url:'/admin/changePassWord',
                      method:'POST',
                      data:{
                          passWord:md5(this.form.passWord),
                          newPassWord:md5(this.form.newPassWord)
                      }
                  }).then(res => {
                      if(!res.errorMsg){
                          this.dialogFormVisible = false
                          this.$message({
                              message:'修改密码成功',
                              type:'success',
                              duration:3000
                          });
                          setTimeout(() => {
                              location.href = '#/login'
                          },3000) 
                      }
                  })
              }else{
                  return false;
              }
          })
      },
      logout(){
          this.$confirm("是否退出登录？","提示",{
              confirmButtonText:"确定",
              cancelButtonText:"取消",
              type:"warning",
          }).then(() => {
              this.$http({
                  url:"/admin/logout",
              }).then((res) => {
                  if (res.errorMsg){
                      this.$message.error(res.errorMsg);
                  }else{
                      localStorage.removeItem('token')
                      localStorage.removeItem('user')
                      location.href = "#/login";
                  }
              })
          })
      },
  },
  computed:{
      ShowuserName(){
          return Cookie.get('token')
      }
  },
  created(){
      console.log(this.$route)
      console.log('---------')
      console.log(this.$router)
    //从缓存获取登录用户信息
    let user = localStorage.getItem("user");
    if(!user){
        //this.$router.push('/login')
        console.log(history,location)
        window.href = location.origin + '/login'
        //history.reload()
    }else{
        //解析为对象
        user = JSON.parse(user);
        //设置头像
        this.photo = user.avatarUrl || require('../assets/head.png');
        //设置昵称
        this.nickName = user.nickName || "小王";
        //获取菜单
        //this.getMenus()
    }
  },
  mounted(){
      //获取当前路由对应的组件
      console.log("当前路由",this.$route)
  }
}
</script>

<!--scoped表示以下样式只在当前页面生效：局部样式 否则为全局变量-->
<style scoped>
.bj{
    width: 14%;
    height: 100%;
    position: fixed;
    top:  0px;
    left: 0px;
    background: url('../assets/ground.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.le{
    width: 100%;
    height: 6%;
    /* font-size: 19px; */
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: normal;
    white-space: nowrap;
    color: #FFFFFF;
    position: absolute;
    top: 1%;
    left: 0%;
    display: flex;
    justify-content: center;
}
.left-title{
    width: 55%;
    height: 4%;
    /* background: #F56C6C; */
}
.ch{
    position: relative;
    left: -45%;
    top: 50%;
}
.tac{
    width: 100%;
    position: absolute;
    top: 6%;
    left: -30%;
}
.col{
    width: 130%;
}
.el-submenu .el-menu-item{
    padding-right: 10%;
}
span{
    font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
    font-weight: normal;
    white-space: nowrap;
    color: #FFFFFF;
    position: absolute;
}
/* .bj1{
    width: 0.9%;
    height: 2%;
    position:absolute;
    margin-top: 1.6%;
    left: 13%;
    background: url("../assets/juxing.png") no-repeat;
} */
a,.router-link-active {
    text-decoration: none;
}
.el-menu{
    border-right: 0px solid #ffd04b;
}
.bj2{
    width: 86%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    float: right;
    background: #EFF6FC;
}
.button{
    background-color:#F56C6C;
    color:#fff;
    position: absolute;
    top: 10%;
    left: 70%;
}
.head{
    position: absolute;
    left: 0%;
}
.right1{
    width: 28%;
    height: 7%;
    position: absolute;
    top: 3.9%;
    left: 70%;
    /* background: #EAB924; */
}
.right2{
    width:95%;
    height: 100%;
    position: absolute;
    top: 14%;
    left: 10%;
    /* background: #EAB924; */
}
.hello{
    position: absolute;
    top: 20%;
    left: 54%;
    font-family: MicrosoftYaHei-, MicrosoftYaHei;
    color: #2C2C2C;
}
.cursor{
    height: 50%;
    width: 25%;
    position: absolute;
    top: 20%;
    left: 3%;
    font-family: MicrosoftYaHei-, MicrosoftYaHei;
    color: #EAB924;
    /* background: #2C2C2C; */
}
.name{
    position: absolute;
    top: 20%;
    left: 25%;
    font-family: MicrosoftYaHei-, MicrosoftYaHei;
    color: #2C2C2C;
}
.footer{
    width: 350px;
    height: 40px;
    position: absolute;
    top: 270px;
}
.righthead{
    width: 100%;
    height: 12.3%;
}
</style>
